<template>
	<view class="box">
		<!-- 地址栏 -->
		<view class="addressInfo" @tap="toAddressSet()" v-if="addressInfo.address_id">
			<view class="top">
				<view class="true_name">
					{{ addressInfo.true_name }}
				</view>
				<view class="mod_phone">
					{{ addressInfo.mod_phone }}
				</view>
			</view>
			<view class="bottom">
				<text class="address">{{ addressInfo.address }}</text>
				<text class="right">></text>
			</view>
		</view>
		<view class="addressInfo" v-else>
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="toAddressSet()">
				<view class="uni-list-cell-navigate uni-navigate-right uni-navigate-badge">
					请选择收货地址
					<text>{{delivery_method}}</text>
				</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="cart-list">
			<view class="cart-list-item" style="margin-bottom: 25upx;" v-for="item in cartData.cart_goods" :key='item.goods_item'>
				<view class="left">
					<view class="cart_image">
						<image style="width: 72px;height: 72px;" :src="item.goods_image" mode="aspectFit"></image>
					</view>
					<view class="cart-center">
						<view class="cart_goodsName">
							<text>{{item.goods_name}}</text>
						</view>
						<!-- <view class="cart_goodsTagName">
									<text v-if="item.goods_adv_tag_list">
									{{item.goods_adv_tag_list[0]}}
									</text>
								</view> -->
						<view class="cart_goodsPrice">
							<text class="uni-product-price-original">￥{{item.goods_shop_price}}</text>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="cart_goodsNum">
						<view class="uni-inline-item">
							<text>X {{ item.buy_num }}</text>
						</view>
					</view>
				</view>


			</view>
		</view>



		<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="deliveryMethod()">
			<view class="uni-list-cell-navigate uni-navigate-right uni-navigate-badge">
				配送方式
				<text>{{delivery_method}}</text>
			</view>
		</view>
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" @tap="payMethod()">
			<view class="uni-list-cell-navigate uni-navigate-right uni-navigate-badge">
				支付方式
				<text>{{pay_method}}</text>
			</view>
		</view>
		<view class="order_message">
			<text>买家留言：</text>
			<input type="text" v-model="order_message" placeholder="请输入留言" />
		</view>

		<!-- 结算 -->
		<view class="footer-box">
			<view class="footer">
				<view class="totalPrice">
					总计：<text class="uni-product-price-original" style="font-size: 40upx;">￥{{cartData.cart_price }}</text>
				</view>
				<view class="checkout">
					<button type="primary" style="border-radius:0" @tap="handleCartSubmit()">提交订单</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getCartData,
		cartSubmit
	} from '../../common/api.js'
	export default {
		components: {},
		data() {
			return {
				userInfo: this.$store.state.userInfo,
				delivery_method: '', //配送方式
				pay_method: '', //支付方式
				addressInfo: this.$store.state.addressInfo, //收货地址
				cartData: this.$store.state.cartData,
				order_message: '1' //留言信息
			}
		},
		methods: {
			deliveryMethod() {
				var that = this;
				uni.showActionSheet({
					itemList: ['快递免邮'],
					success: function(res) {
						if (res.tapIndex === 0) {

							that.delivery_method = '快递免邮'
						}
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					},

				});
			},
			payMethod() {
				var that = this
				uni.showActionSheet({
					itemList: ['支付宝支付', '微信支付'],
					success: (res) => {
						if (res.tapIndex === 0) {
							that.pay_method = '支付宝支付'
						} else if (res.tapIndex === 1) {
							that.pay_method = ' 微信支付'
						}
					}
				})
			},
			toAddressSet(){
				uni.redirectTo({
					url: '../address/address_set'
				})
			},
			handleCartSubmit(){
				 let pay = ['xxzf', 'hdfk']
				let reqData = {
					user_unionid: this.userInfo.user_unionid,
					user_token: this.userInfo.user_token,
					address_id: this.addressInfo.address_id,
					payment_code: pay, //没有暂时为0
					express_id: 1,
					order_message: this.order_message	
				}
				console.log(reqData)
				cartSubmit(reqData).then( res => {
					console.log(res.data)
				})
			}
		},
		onShow() {
			console.log(this.cartData)
		}
	}
</script>

<style>
	@import "../../common/uni.css";

	.addressInfo {
		display: flex;
		flex-direction: column;
		padding: 20upx 40upx;
		border-bottom: #C0C0C0 2px solid;
	}

	.addressInfo .top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.addressInfo .bottom {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.addressInfo .bottom .right {
		color: #C0C0C0;
	}
	
	.cart-list{
		margin-top: 30upx;
	}
	
	.cart-list-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.cart-list-item .left{
		display: flex;
		flex-direction: row;
	}
	.cart-list-item .right{
		padding-right: 20upx;
	}

	.order_message {
		padding: 22upx 30upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.order_message input {
		border-bottom: 1px #C0C0C0 solid;
		flex-grow: 1;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: rgb(248, 248, 248);
	}
</style>
